<template>
  <n-layout-sider
    :width="240"
    style="box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.06)"
  >
    <n-menu :options="menuOptions" />
  </n-layout-sider>
</template>

<script lang="ts" setup>
  import { h } from 'vue'
  import { RouterLink } from 'vue-router'
  import { NIcon } from 'naive-ui'
  import type { MenuOption } from 'naive-ui'
  import {
    BookOutline as BookIcon,
    PersonOutline as PersonIcon,
    CubeOutline,
    CardOutline,
    BagCheckOutline
  } from '@vicons/ionicons5'

  // 渲染图标
  function renderIcon(icon: Component) {
    return () => h(NIcon, null, { default: () => h(icon) })
  }

  // 路由跳转
  const routerTo = (path: string, label: string) => {
    return h(RouterLink, { to: { path } }, { default: () => label })
  }

  // 菜单列表
  const menuOptions: MenuOption[] = [
    {
      type: 'group',
      label: '首页',
      key: 'home',
      children: [
        {
          label: () => routerTo('/', '首页'),
          key: 'index'
        }
      ]
    },
    {
      type: 'group',
      label: '权限',
      key: 'people',
      children: [
        {
          label: () => routerTo('/power/role', '角色管理'),
          key: 'narrator',
          icon: renderIcon(BookIcon)
        },
        {
          label: () => routerTo('/power/menu', '菜单管理'),
          key: 'sheep-man',
          icon: renderIcon(CubeOutline)
        },
        {
          label: () => routerTo('/power/user', '用户管理'),
          key: 'user',
          icon: renderIcon(PersonIcon)
        }
      ]
    },
    {
      type: 'group',
      label: '账单',
      key: 'beverage',
      children: [
        {
          label: () => routerTo('/bill/manage', '账单管理'),
          key: 'bill'
        },
        {
          label: () => routerTo('/bill/card', '卡包'),
          key: 'card',
          icon: renderIcon(CardOutline)
        },
        {
          label: () => routerTo('/bill/payType', '支付类型'),
          key: 'pay-type',
          icon: renderIcon(BagCheckOutline)
        },
        {
          label: () => routerTo('/bill/variation', '消费'),
          key: 'variation'
        }
      ]
    },
    {
      type: 'group',
      label: '规划',
      key: 'plan',
      children: [
        {
          label: () => routerTo('/plan/schedule', '规划管理'),
          key: 'schedule'
        }
      ]
    }
  ]
</script>

<style scoped lang="scss"></style>
